<style scoped>
	.toast-mask{
		position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    text-align: center;
	    z-index: 9999;
	}
	.toast_content{
		position: fixed;
	   top:5.2rem;
		width: 100%;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		opacity: 1;
		z-index: 10000;
	}
	.toast_content_inner{
		max-width: 6rem;
		color: #fff;
		font-size: 0.28rem;
		line-height: 0.32rem;
		text-align: center;
		word-break:break-all;
		white-space: wrap;
		padding: 0.16rem 0.4rem;
		background-color: rgba(0,0,0,0.6);
		border-radius: 0.04rem;
	}
	.toast-enter{

	}
	.toast-enter-active{
		top:3.6rem;
		opacity: 0;
		transition: all 0.3s ease-in-out;
	}
	.toast-enter-to{
		top:5.2rem;
		opacity: 1;
	}
	.toast-leave{

	}
	.toast-leave-active{
       top:5.2rem;
	   opacity: 1;
	   transition: all 0.3s ease-in-out;
	}
	.toast-leave-to{
		top:3.6rem;
		opacity: 0;
	}

</style>
<template>
	<div> 
		<div class="toast-mask"  v-show="msg.show"></div>
		<transition name="toast">
		    <div class="toast_content" v-show="msg.show">
				<div class="toast_content_inner">{{msg.content}}</div>
	        	
	        </div>
		</transition>
	</div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
	data: function(){
        return {
		   timeout:null,
		
        }
    },
	computed: mapState({
		msg: state => state.app.msg
	}),
	mounted(){
       
	},
	methods: {
        ...mapActions([
          'hideMsg'
		]),
    },
  	watch: {
  		'msg': {
  			handler: function(val, oldVal){
  				if(val.show == oldVal.show) return;
				clearTimeout(this.timeout);
  				this.timeout=setTimeout(()=>{
		            this.hideMsg();
		            if(val.callback && typeof(val.callback) === 'function'){
		            	val.callback()
		            }
		        },1500);
  			},
  			deep: true
  		}
  	}
}	
</script>